<script setup lang="ts">
import { REPORT_ID } from '@/enum'

import CompanyElectricityReport from '@/components/Reports/company-electricity/index.vue'
import CompanyWeightReport2 from '@/components/Reports/company-weight/index2.vue'
import CompanyElectricityCategoryReport2 from '@/components/Reports/company-electricity-category/index2.vue'
import type { SaveParams } from '@/components/Reports/type'

type ReportRef =
  | InstanceType<typeof CompanyElectricityReport>
  | InstanceType<typeof CompanyWeightReport2>
  | InstanceType<typeof CompanyElectricityCategoryReport2>

const props = defineProps<{
  month: string
  title: string
  readonly: boolean
  reportId: REPORT_ID
  dataId?: number
  socialCreditCode: string
  company: string
}>()
const reportRef = ref<ReportRef>()

const isCompanyElectricity = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_ELECTRICITY
})
const isCompanyWeight = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_WEIGHT_2
})
const isCompanyElectricityCategory = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_ELECTRICITY_CATEGORY_2
})

const headTitle = computed(() => {
  return `${dayjs(props.month).format('YYYY年MM月')} - ${props.title}`
})

function getData() {
  return reportRef.value?.getSettings()
}
function triggerSave(params: SaveParams) {
  reportRef.value?.save?.(params)
}
</script>

<template>
  <div class="flex flex-1 flex-col p-4">
    <div class="relative flex flex-shrink-0 justify-center">
      <span class="fs-24 mr-2 block">{{ headTitle }}</span>
      <slot name="action" :get-data="getData" :trigger-save="triggerSave" />
    </div>
    <div v-if="isCompanyWeight" class="flex items-center justify-end">
      <span class="fs-14 text-gray">单位：吨</span>
    </div>
    <div class="flex-1 overflow-hidden" :class="{ 'mt-3': isCompanyWeight, 'mt-5': !isCompanyWeight }">
      <CompanyWeightReport2 v-if="isCompanyWeight" ref="reportRef" :time="month" :company="company" :readonly="readonly" :social-credit-code="socialCreditCode" :data-id="dataId" />
      <CompanyElectricityReport v-else-if="isCompanyElectricity" ref="reportRef" :time="month" :company="company" :readonly="readonly" :social-credit-code="socialCreditCode" :data-id="dataId" />
      <CompanyElectricityCategoryReport2 v-else-if="isCompanyElectricityCategory" ref="reportRef" :social-credit-code="socialCreditCode" :time="month" :data-id="dataId" :readonly="readonly" :company="company" />
    </div>
  </div>
</template>
